<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <link rel="stylesheet" href="/plug/layui/css/layui.css">
</head>
<body>
<div style="margin: 20px">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" type="button" onclick="edit('添加')">添加</button>
                <button type="button" class="layui-btn" id="upload">
                    <i class="layui-icon">&#xe67c;</i>导入
                </button>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" type="button" onclick="location.href='/template/curriculum.xlsx'">下载模板</button>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">课程名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input" th:value="${name == null ? '' : name}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">周</label>
                <div class="layui-input-block">
                    <select name="week">
                        <option value="">请选择</option>
                        <option value="0" th:selected="${week == 0}">周日</option>
                        <option value="1" th:selected="${week == 1}">周一</option>
                        <option value="2" th:selected="${week == 2}">周二</option>
                        <option value="3" th:selected="${week == 3}">周三</option>
                        <option value="4" th:selected="${week == 4}">周四</option>
                        <option value="5" th:selected="${week == 5}">周五</option>
                        <option value="6" th:selected="${week == 6}">周六</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-form-select">
                <label class="layui-form-label">年级</label>
                <div class="layui-input-block">
                    <select name="gId" lay-filter="grade">
                        <option value="">请选择</option>
                        <option th:each="data: ${gradeList}" th:value="${data.id}" th:selected="${data.id == gId}" th:text="${data.name}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-form-select">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-block">
                    <select name="gradeClassId" lay-verify="required" lay-filter="class">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" type="button" onclick="search()">检索</button>
                <button class="layui-btn" type="reset">重置</button>
            </div>
        </div>
    </form>
    <table class="layui-table">
        <thead>
        <tr>
            <th>课程名</th>
            <th>周</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>年级</th>
            <th>备注</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="data : ${page.records}">
            <td th:text="${data.name}"></td>
            <td th:text="${data.weekName}"></td>
            <td th:text="${data.startTime}"></td>
            <td th:text="${data.endTime}"></td>
            <td th:text="${data.gName + ' ' + data.cName}"></td>
            <td th:text="${data.remarks}"></td>
            <td th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td width="200px">
                <button class="layui-btn layui-btn-warm" type="button" th:onclick="'edit(\'修改\', ' + ${data.id} + ')'">修改</button>
                <button class="layui-btn layui-btn-danger" type="button" th:onclick="'del(' + ${data.id} +  ')'">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="page"></div>
</div>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/plug/layui/layui.all.js"></script>
<script>
    $("input[type=reset]").click(function () {
        $(".layui-form select").val("");
    });
    layui.use(['form', 'laypage', 'upload'], function() {
        const form = layui.form;
        const page = layui.laypage;
        const upload = layui.upload;
        form.render('select');
        page.render({
            elem: 'page',
            count: [[${page.total}]],
            limit: 10,
            curr: [[${page.current}]],
            jump: function (obj, first) {
            if(first) {
                return;
            }
            location.href = `/curriculum/list?pageNo=${obj.curr}&${$("#search-form").serialize()}`;
        }
        });

        form.on('select(grade)', function (data) {
            $.get("/gradeClass/getClassByGrade?id=" + data.value, function (res) {
                if(res.code === 200) {
                    $('select[name=gradeClassId]').empty();
                    $('select[name=gradeClassId]').append('<option value="">请选择</option>');
                    $(res.data.list).each(function () {
                        $('select[name=gradeClassId]').append(`<option value="${this.id}" ${this.id === [[${gradeClassId == null ? -1 : gradeClassId}]] ? 'selected' : ''}>${this.name}</option>`);
                    })
                    form.render('select');
                }
            })
        })

        var uploadInst = upload.render({
            elem: '#upload'
            ,url: '/curriculum/import'
            ,accept: 'file'
            ,exts: 'xls|xlsx'
            ,done: function(res){
                layer.msg(res.msg);
                if(res.code === 200) {
                    setTimeout(function () {
                        location.reload();
                    }, 800)
                }
            }
            ,error: function() {
                layer.msg("发生错误！");
            }
        });
        $('select[name=gId]').siblings("div.layui-form-select").find('dl dd[lay-value=' + $("select[name=gId]").val() + ']').click();
    });
    function search() {
        location.href = '/curriculum/list?pageNo=1&' + $(".layui-form").serialize();
    }

    function edit(title, id) {
        layer.open({
            title: title,
            type: 2,
            area: ['800px', '600px'],
            fixed: false, //不固定
            content: "/curriculum/edit?id=" + (id === undefined ? '' : id)
        });
    }

    function del(id) {
        layer.confirm('确认要删除吗？', {
            btn: ['确定', '取消'] //按钮
        }, function() {
            $.post("/curriculum/del", { id: id }, function (rest) {
                layer.msg(rest.msg);
                if(rest.code === 200) {
                    location.reload();
                }
            });
        });
    }
</script>
</body>
</html>